<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现双向的数据绑定</title>
    <script src="../../框架/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="mag">
    <p>当我们在输入框输入数据的时候，可以在页面中进行渲染显示</p>
    {{mag}}
    <button type="button" @click="change()">修改数据</button>
    <p>当我们使用代码修改数据的时候也可以在页面中进行渲染显示，则实现了数据的双向绑定</p>
  </div>
  <script>
    let a =new Vue({
      el:'#app',
      data(){
        return {
          mag:'今天天气真不错'
        }
      },
      methods:{
        change:function (){
          this.mag = '修改数据'
        }
      }
    })
  </script>
</body>
</html>